<!DOCTYPE HTML>
<html lang="zh-CN">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="content-type" content="text/html; charset=UTF-8">
    <title>Web应用小模板</title>
    <!--suppress CssUnknownTarget -->
    <style>
      * { box-sizing: border-box; }
      .btnStl { border-radius: 6px; background-color: #EED5D2; color: blue; }
      .barDiv { text-align: left; width: 100%; margin: 10px;}
      .lblStl { color: #de773f; margin-left: 5px; }
      .txtStl { background-color: #F0FFFF; color: #f47a55; border-radius: 4px; border: 1px solid #c8cccf; width: 150px; }
      #mainBody {width:100%;height:100%;position:absolute;z-index:-1;}
      .cloud {position:absolute;top:0;left:0;width:100%;height:100%;
        background:url(./img/cloud.png) no-repeat;z-index:1;opacity:0.5;}
      #cloud2 {z-index:2;}
    </style>
    <!--suppress HtmlUnknownTarget -->
    <link rel="stylesheet" type="text/css" href="../css/fltMenu.css" >
    <!--suppress HtmlUnknownTarget -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!--suppress HtmlUnknownTarget -->
    <script type="text/javascript" src="js/cloud.js"></script>
  </head>
  <!--suppress CssUnknownTarget -->
  <body style="background-color:#1c77ac; background-image:url(./img/light.png);
    background-repeat:no-repeat; background-position:center top; overflow:hidden;">
    <div id="mainBody" >
      <div id="cloud1" class="cloud"></div>
      <div id="cloud2" class="cloud"></div>
    </div>
    <div style="width: 60%; margin: 0 15%">
      <div id="head" style="text-align: center; color: #f2eada">
        <h2>Web应用小模板</h2>
      </div>
      <div id="content" style="width: 100%; float:left; border-style: groove;">
        <div id="left" style="width: 100%; float: left; border-style: ridge;">
          <div class="barDiv">
            <input type="button" class="btnStl" value="自身服务调用" onclick="slfIvkPrcs();">
            <input type="text" id="slfPdcTxt" value="Darling" class="txtStl"/>
            <label id="slfIvkShow" for="slfPdcTxt" class="lblStl">回调指示: ...</label>
          </div>
          <div class="barDiv">
            <input type="button" class="btnStl" value="提供服务调用" onclick="svrPdcPrcs();">
            <input type="text" id="svrPdcTxt" value="Hello" class="txtStl"/>
            <label id="svcIvkShow" for="svrPdcTxt" class="lblStl">回调指示: ...</label>
          </div>
          <div class="barDiv">
            <input type="button" class="btnStl" value="错误调用处理" onclick="errPdcPrcs();">
            <label id="errIvkShow" class="lblStl">回调指示: ...</label>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    function slfIvkPrcs() {                       // 自身服务调用处理
      let prmt = $("#slfPdcTxt").val()
      $.get("/connect/{" + prmt + "}",
        function (dt) {
          $("#slfPdcShow").val(dt)
        }, "text");
    }
    function svrPdcPrcs() {                       // 提供服务调用处理
      let prmt = $("#svrPdcTxt").val()
      $.get("/Interact?param=" + prmt,
        function (dt) {
          $("#svcIvkShow").val(dt)
        }, "text");
    }
    function errPdcPrcs() {                       // 服务错误调用处理
      $.get("/errFuse",
        function (dt) {
          $("#errIvkShow").val(dt)
        }, "text");
    }
  </script>
</html>
